<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7_固定定位全屏遮罩</title>
  <style>
    .mask{
      background-color: rgba(0,0,0,.4);
      /*固定定位:以html视口为参照物,紧贴两个边,就能实现撑满全屏的效果*/
      position: fixed;
      top: 0;
      bottom: 0;
      right:0;
      left:0;
    }
  </style>
</head>
<body>
<div class="mask"></div>
<div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, consequuntur dolores excepturi incidunt
    iure labore laborum pariatur velit veritatis voluptatibus. Libero, quam, quas! Atque consequatur esse maxime saepe
    sed similique.
  </div>
  <div>A accusantium architecto aspernatur consequuntur earum et hic illo in iure molestiae mollitia nobis obcaecati,
    officia optio pariatur possimus quia recusandae tenetur. Autem et explicabo iure modi quis quo sit?
  </div>
  <div>Commodi, consequatur, consequuntur cum dolores eaque earum eum exercitationem labore, laboriosam nesciunt rerum
    suscipit tempore voluptas! Dolore dolores explicabo fugiat illum praesentium quaerat quibusdam sint. Architecto
    dicta dolorum rem suscipit?
  </div>
  <div>Amet culpa doloribus eos incidunt perspiciatis, rem tempora ullam velit veritatis voluptatem! Accusamus ad
    aspernatur deleniti ea eligendi esse eum harum impedit inventore nostrum numquam quasi quia, quod repellendus vel.
  </div>
  <div>Aspernatur cumque deleniti dignissimos doloribus dolorum, earum eum, in inventore laboriosam laudantium libero
    maxime nam nihil nobis nulla odio praesentium quas qui quis repellat saepe soluta veritatis vitae voluptatibus
    voluptatum.
  </div>
  <div>Accusamus culpa dolore quae ratione. Ad animi commodi dignissimos distinctio dolore, earum hic illo laborum nulla
    officia optio perspiciatis quos, tenetur veniam vitae? Cumque optio, veritatis! Eius officiis provident sequi.
  </div>
  <div>Ad aliquid distinctio itaque molestias placeat? Labore necessitatibus quis sunt tempora ullam vero voluptates. Ab
    ad at atque explicabo incidunt libero non soluta totam velit, voluptate. Dignissimos dolor quibusdam quod.
  </div>
  <div>Alias animi at consequuntur maiores provident. Accusantium aliquid consequuntur ducimus eaque et, facilis fugiat,
    in iste laboriosam nemo perferendis perspiciatis quibusdam repellat reprehenderit saepe tempore voluptatibus.
    Aliquam consequatur mollitia sed.
  </div>
  <div>Corporis itaque modi quasi? Accusantium ad architecto cum dicta, dolore dolorem eveniet in minus nulla numquam
    sunt, unde vel. Amet cupiditate ea error incidunt, ipsam pariatur soluta. Aut, rem suscipit.
  </div>
  <div>Consectetur cum, explicabo maiores mollitia natus nemo odio perspiciatis praesentium quis saepe! Accusantium
    dolor enim incidunt, ipsa ipsum labore magnam nihil numquam officiis, optio quisquam repellat sequi sit, ut vero?
  </div>
</div>
</body>
</html>